<template>
  <Page header="个人中心">
    <view>
      <view class="flex" style="padding: 0 24rpx">
        <view class="flex" style="width: 100%;">
          <view>
            <u-avatar show="circle" :src="userInfo.avatar_url" default-url="/static/profile/jx216@4x.png" size="128"></u-avatar>
          </view>
          <view v-if="userInfo.id" class="flex flex-direction-column justify-content-center" style="margin-left: 8px; flex: 1">
            <view>
             {{ userInfo.nickname || ''}}
            </view>
            <view style="height: 20rpx;"></view>
            <view class="flex align-items-center"
                  style="background-color: #E5EAFD; border-radius: 8rpx; width: 320rpx; height: 40rpx;">
              <u-image src="/static/profile/z1371@4x.png" width="28" height="28"
                       style="margin-right: 12px;"></u-image>
              <text style="line-height: 40rpx;" color="#0C40E4">{{ userInfo.phone }}</text>
            </view>
          </view>
          <view v-else class="flex align-items-center" style="margin-left: 20rpx;" @click="toUseLogin">
            <view style="font-size: 32rpx;line-height: 20rpx;color: #0C0C16">去登录</view>
          </view>
          <view v-if="userInfo.id" class="flex align-items-center" style="margin-top: 0px;" @click="toUserDetail">
            <view style="font-size: 24rpx;line-height: 20rpx;color: #0C0C16">编辑资料</view>
          </view>
        </view>
      </view>
      <view style="height: 15px;"></view>
      <view class="flex flex-direction-column">
        <view style="background-color: #fff; margin: 0 28rpx 0 28rpx; border-radius: 16rpx;">
          <view class="flex align-items-center" style="margin-left: 11px; margin-top: 18px;color: #262626">
            常用工具
          </view>
          <div style="margin:32rpx 16rpx;display: flex;flex-wrap: wrap">
            <view style="width: 25%;" v-for="(item, index) in tools" :key="index"
                  @click="handleClickItem(item)">
              <view class="flex flex-direction-column align-items-center" style="margin: 0 16rpx 44rpx 16rpx;">
                <u-image height="48" width="48" :src="item.image" mode="aspectFit"></u-image>
                <view style="height: 14rpx;"></view>
                <view style="color: #3D3D3D;font-size:28rpx;line-height: 30rpx ">
                  {{ item.label }}
                </view>
              </view>
            </view>
          </div>
        </view>
      </view>
      <div class="button-group" v-if="userInfo.id">
        <div class="primary-button large" @click="toLogout">退出登录</div>
      </div>
      <u-popup
          round="16"
          mode="center"
          bgColor="#fff"
          v-model="showPop"
          :closeable="true">
        <div class="serve-popup">
          <div class="serve-box">
            <view class="serve-image">
              <u-image width="100%" height="60%" src="/static/profile/server_image.png"></u-image>
            </view>
            <div class="serve-name">请拨打客服热线</div>
            <div class="serve-phone">400000000</div>
            <div class="serve-btn" @click="toPhone('400000000')">立即拨打</div>
            <div class="serve-cancel" @click="showPop = false">取消</div>
          </div>
        </div>
      </u-popup>
    </view>
    <Tabbar :current="0"/>
  </Page>
</template>

<script>
import { mapGetters } from 'vuex'
import Page from "../../components/Page.vue";
import Tabbar from "../../components/Tabbar.vue";
export default {
  components: {Tabbar, Page},
  computed: {
    ...mapGetters(['userInfo']),
    supplierName() {
      if (this.userInfo.supplier) {
        return `(${this.userInfo.supplier.name})`
      }
      return  ''
    }
  },
  data() {
    return {
      showPop:false,
      tools: [
        {
          label: '收入明细',
          image: '/static/profile/lj@4x (34).png',
          url: '/pages/my/balance'
        },
        {
          label: '申请提现',
          image: '/static/profile/lj@4x (34).png',
          url: '/pages/my/createBalance'
        }
      ],
    }
  },
  onShow() {
    if (this.$store.state.userInfo.role === 1) {
      this.tools = [
        {
          label: '用户管理',
          image: '/static/profile/lj@4x (34).png',
          url: '/pages/user/list'
        },
        {
          label: '提现审批',
          image: '/static/profile/lj@4x (34).png',
          url: '/pages/my/balanceAudit'
        },
        {
          label: '收入明细',
          image: '/static/profile/lj@4x (34).png',
          url: '/pages/my/balance'
        },
        {
          label: '申请提现',
          image: '/static/profile/lj@4x (34).png',
          url: '/pages/my/createBalance'
        }
      ]
    }
  },
  methods: {
    handleClickItem(item) {
      if (item.click) {
        item.click()
        return
      }
      console.log(item.url)
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
    toPhone(phoneNumber) {
      console.log(phoneNumber)
      uni.makePhoneCall({
        phoneNumber
      })
    },
    toUserDetail() {
      uni.navigateTo({
        url: '/pages/my/detail'
      })
    },
    toUseLogin() {
      uni.navigateTo({
        url: '/pages/user/login'
      })
    },
    toLogout() {
      this.$store.commit('logout')
      uni.navigateTo({
        url: '/pages/user/login'
      })
    }

  }
}
</script>

<style lang="scss">
.serve-popup {
  border-radius: 8px;
  width: 345px;
  height: 400px;
  background-color: #F5F6FA;
  position: relative;
  overflow: hidden;
  .newusername {
    width: 305px;
    height: 50px;
    border-radius: 11.41px;
    opacity: 1;
    background: #F3F6FF;
    flex: initial !important;
    border: none;
  }
  .change-name {
    font-family: PingFang SC;
    font-size: 22px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #000000;
    margin: 23px 0 20px;
  }
  .serve-image {
    position: absolute;
    left: 0;
    top: -100rpx;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: auto;
  }
  .serve-box {
    overflow: hidden;
    padding-bottom: 50rpx;
    width: 100%;
    height: 100%;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    .serve-name {
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: normal;
      line-height: 18px;
      color: #3D3D3D;
    }
    .serve-phone {
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: normal;
      line-height: 18px;
      color: #3D3D3D;
      margin-top: 30px;
    }
    .serve-btn {
      width: 251px;
      height: 46px;
      border-radius: 23px;
      opacity: 1;
      background: linear-gradient(90deg, #75ACFF 4%, #3180FF 100%);
      text-align: center;
      line-height: 46px;
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: normal;
      color: #FFFFFF;
      margin-top: 20px;
      margin-bottom: 20px;
      position: relative;
      z-index: 2
    }
    .serve-cancel {
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: normal;
      line-height: 18px;
      color: #0089FF;
    }
    .logout-btn {
      height: 46px;
      border-radius: 23px;
      opacity: 1;
      background: #DCEAFF;
      text-align: center;
      line-height: 46px;
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: normal;
      color: #3B86FF;
    }
  }
}
.more-collapse-text {
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  color: #6A6880;
  padding: 5px 0 17px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
